<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 配置视口 -->
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!-- 先把bootstrap的css文件引入进来 -->
    <link rel="stylesheet" href="libs/bootstrap/css/bootstrap.css">
    <!-- 自己写的less文件
		引入自己写的less文件，rel的值
	-->
    <link rel="stylesheet" href="css/common_section.css">
    <link rel="stylesheet" href="css/category_product_detail.css">


    <!-- 配置的模板需要注意:1、type必须是text/html  2、需要配置一个id -->
    <script type='text/html' id='product-img'>
        {{each result as value i}}
            <!--<img src="images/product_info.jpg" alt="">-->
            <a href="#"></a>
            <div class='img'>
                <!--<img src="images/sc.jpg" alt="">-->
                {{#value.productImg}}
            </div>
            <!--<p>TCL高清智能网络液晶电视TCL高清智能网络液晶电视TCL高清智能网络液晶电视TCL高清智能网络液晶电视</p>-->
            <p>
                {{value.productName}}
            </p>
        {{/each}}
    </script>

    <script type='text/html' id='bjShop'>
        <p><a href="#">比价购买</a></p>
        {{each result as value i}}
            {{#value.bjShop}}
            {{#value.bjShop}}
            {{#value.bjShop}}
            {{#value.bjShop}}
        {{/each}}
    </script>
    <title>慢慢买商品详情</title>

    <script type='text/html' id='appraise'>
        <div class="product-t">
            <p>优选网友评价</p>
        </div>
        {{each result as value i}}
            <div class="product-m">
                <span class="person-name">{{value.comName}}</span>
                <span class="buy-time">{{value.comTime}}</span><br />
                <span class='from-where'>{{value.comFrom}}</span>
                <p class='person-appraise'>{{value.comContent}}</p>
            </div>
        {{/each}}
        <div class="product-b">
            <p>查看更多评价</p>
        </div>
    </script>
</head>

<body>
<!-- 头部
    语义化标签的使用
    语义化标签存在兼容性问题：引入html5shiv.js库
-->
<header id="header">
</header>
<!-- 搜索 -->
<section id="search">
    <!-- 加上form标签的原因
    1、更具有语义性
    2、它帮我们实现了一些默认的效果
    3、更方便布局，不影响其他元素
 -->
</section>
<!-- 商品列表 -->
<section id="product">
    <nav>
        <ol class="breadcrumb">
            <li><a href="index.html">首页</a></li>
        </ol>
    </nav>
    <div class="product-img">

    </div>
    <div class="product-buy">

    </div>
    <div class="product-appraise">



    </div>
</section>

<!-- 底部 -->
<footer id="footer">
</footer>
</body>
<!-- bootstrap.js依赖于jquery.js  所以需要先引入jquery.js

	bootstrap.css jquery.js  bootstrap.js这三个文件的顺序不能错
	jquery.js bootstrap.js这两个js文件的引入最好放在文档的末尾处
	-->
<script type="text/javascript" src="libs/jquery/jquery.js"></script>
<script type="text/javascript" src="libs/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="libs/template/template.js"></script>
<!-- 这里写的就是这个界面.js文件 -->
<script type="text/javascript" src="js/common_section.js"></script>
<script type="text/javascript" src="js/category_product_detail.js"></script>

</html>